<template>
    <view :style="[
    props.direction=='horizontal'
    ?{width:props.width+'px',height:props.size+'rpx',left:props.x+'px',top:-props.size+'rpx'}:
    {height:props.width+'px',width:props.size+'rpx',top:props.x+'px'}
    ]"
    :class="[
     props.direction=='horizontal'?'flex flex-col':'flex flex-row absolute'
    ]"
    >
        <tm-sheet :followTheme="props.followTheme" :round="10" unit="px" :color="props.color" linear="right" :width="props.direction=='horizontal'?props.width:_sizePx" :height="props.direction=='horizontal'?_sizePx:props.width" :margin="[0,0]" :padding="[0,0]"></tm-sheet>
    </view>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import tmSheet from '../tm-sheet/tm-sheet.vue';
const props = defineProps({
	//是否跟随全局主题的变换而变换
	followTheme: {
		type: [Boolean, String],
		default: true
	},
   size:{
        type:Number,
        default:6
    },
    x:{
        type:Number,
        dfault:0
    },
    width:{
        type:Number,
        dfault:0
    },
    color:{
        type:String,
        default:'primary'
    },
    /**
     * 方向
     * horizontal:水平,
     * vertical:竖向。
     */
    direction:{
        type:String,
        default:"vertical"
    },
})
const _sizePx  = computed(()=>uni.upx2px(props.size))
</script>